<script lang="ts" setup>
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Select, Table } from 'ant-design-vue';
import { ArrowLeft, Edit, Plus } from 'lucide-vue-next';

// 响应式数据
const selectedYear = ref('2025');
const yearOptions = ref([
  { label: '2023', value: '2023' },
  { label: '2024', value: '2024' },
  { label: '2025', value: '2025' },
  { label: '2026', value: '2026' },
]);

// 月份状态数据
const monthStatusData = ref([
  { month: '一月', status: 'processing', key: '1' },
  { month: '二月', status: 'default', key: '2' },
  { month: '三月', status: 'default', key: '3' },
  { month: '四月', status: 'default', key: '4' },
  { month: '五月', status: 'default', key: '5' },
  { month: '六月', status: 'default', key: '6' },
  { month: '七月', status: 'default', key: '7' },
  { month: '八月', status: 'default', key: '8' },
  { month: '九月', status: 'default', key: '9' },
  { month: '十月', status: 'default', key: '10' },
  { month: '十一月', status: 'default', key: '11' },
  { month: '十二月', status: 'default', key: '12' },
]);

// 月份状态表格列配置
const monthColumns = [
  { title: '月份', dataIndex: 'month', key: 'month', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
];

// 结转项目数据
const transferItems = ref([
  {
    id: 1,
    title: '摊销待摊费用',
    amount: '——',
    hasEdit: true,
    hasCalculate: true,
  },
  {
    id: 2,
    title: '计提工资',
    amount: '——',
    hasEdit: false,
    hasCalculate: true,
  },
  {
    id: 3,
    title: '计提折旧',
    amount: '——',
    hasEdit: true,
    hasCalculate: true,
  },
  {
    id: 4,
    title: '计提税金',
    amount: '——',
    hasEdit: false,
    hasCalculate: true,
  },
  {
    id: 5,
    title: '结转销售成本',
    amount: '——',
    hasEdit: true,
    hasCalculate: true,
  },
  {
    id: 6,
    title: '结转汇兑损益',
    amount: '——',
    hasEdit: false,
    hasCalculate: true,
  },
  {
    id: 7,
    title: '结转损益',
    amount: '——',
    hasEdit: false,
    hasCalculate: true,
  },
  {
    id: 8,
    title: '结转本年利润',
    amount: '——',
    hasEdit: false,
    hasCalculate: true,
  },
]);

// 事件处理函数
const handleYearChange = (value: string) => {
  selectedYear.value = value;
};

const handleTrialCalculation = () => {
  // 试算金额逻辑
};

const handleClosing = () => {
  // 结账逻辑
};

const handleReverseClosing = () => {
  // 反结逻辑
};

const handleCalculate = (_item: any) => {
  // 测算逻辑
};

const handleEdit = (_item: any) => {
  // 编辑逻辑
};

const handleAddTransferPlan = () => {
  // 新增结转方案逻辑
};

const handleBackToWorkbench = () => {
  // 返回工作台逻辑
};
</script>

<template>
  <Page auto-content-height>
    <!-- 页面顶部栏 -->
    <div class="mb-6 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-900">
        北京神州源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex items-center space-x-2 text-sm text-gray-600">
        <span>结账</span>
        <span>></span>
        <span class="text-blue-600">期末结转</span>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-4">
        <Button type="primary" @click="handleBackToWorkbench">
          <ArrowLeft class="mr-1 h-4 w-4" />
          返回工作台
        </Button>
      </div>
    </div>

    <!-- 筛选与操作区 -->
    <div
      class="mb-6 flex items-center justify-between rounded-lg bg-white p-4 shadow-sm"
    >
      <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-2">
          <span class="text-sm font-medium text-gray-700">年份：</span>
          <Select
            v-model:value="selectedYear"
            :options="yearOptions"
            class="w-24"
            @change="handleYearChange"
          />
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <Button type="primary" @click="handleTrialCalculation">
          试算金额
        </Button>
        <Button type="primary" @click="handleClosing"> 结账 </Button>
        <Button @click="handleReverseClosing"> 反结 </Button>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="grid grid-cols-12 gap-6">
      <!-- 月份状态表格 -->
      <div class="col-span-12 lg:col-span-4">
        <div class="rounded-lg bg-white p-4 shadow-sm">
          <h3 class="mb-4 text-lg font-medium text-gray-900">月份状态</h3>
          <Table
            :columns="monthColumns"
            :data-source="monthStatusData"
            :pagination="false"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <div class="flex items-center">
                  <div
                    v-if="record.status === 'processing'"
                    class="h-2 w-2 animate-spin rounded-full border border-blue-500 border-t-transparent"
                  ></div>
                  <div v-else class="h-2 w-2 rounded-full bg-gray-300"></div>
                </div>
              </template>
            </template>
          </Table>
        </div>
      </div>

      <!-- 结转项目卡片区 -->
      <div class="col-span-12 lg:col-span-8">
        <div class="rounded-lg bg-white p-4 shadow-sm">
          <h3 class="mb-4 text-lg font-medium text-gray-900">结转项目</h3>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <!-- 结转项目卡片 -->
            <div
              v-for="item in transferItems"
              :key="item.id"
              class="rounded-lg border border-gray-200 p-4 transition-shadow hover:shadow-md"
            >
              <div class="mb-3 flex items-center justify-between">
                <h4 class="text-sm font-medium text-gray-900">
                  {{ item.title }}
                </h4>
                <Edit
                  v-if="item.hasEdit"
                  class="h-4 w-4 cursor-pointer text-gray-400 hover:text-blue-500"
                  @click="handleEdit(item)"
                />
              </div>

              <div class="mb-3">
                <span class="text-sm text-gray-600">金额：</span>
                <span class="text-sm font-medium text-gray-900">
                  {{ item.amount }}
                </span>
              </div>

              <div class="flex justify-end">
                <Button
                  v-if="item.hasCalculate"
                  size="small"
                  @click="handleCalculate(item)"
                >
                  测算
                </Button>
              </div>
            </div>

            <!-- 新增结转方案卡片 -->
            <div
              class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-4 transition-colors hover:border-blue-400 hover:bg-blue-50"
              @click="handleAddTransferPlan"
            >
              <Plus class="mb-2 h-8 w-8 text-gray-400" />
              <span class="text-sm font-medium text-gray-600">
                新增结转方案
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<style scoped>
.ant-table-tbody > tr > td {
  padding: 8px 12px;
}

.ant-table-thead > tr > th {
  padding: 12px;
  background-color: #fafafa;
  font-weight: 600;
}
</style>